<script lang="ts" setup>
import { useAdminEmailStore } from '../store/adminEmail'

const { emailData } = useAdminEmailStore()
</script>

<template>
  <t-row style="width: 100%">
    <t-col :lg="5" :md="6" :sm="12" :xl="5" :xs="12">
      <t-space class="left_space" direction="vertical">
        <t-form :data="emailData" label-align="right" label-width="70px">
          <t-form-item label="主机名">
            <t-input v-model="emailData.host" placeholder="SMTP服务器主机名 smtp.qq.com" />
          </t-form-item>

          <t-form-item label="端口号">
            <t-input v-model="emailData.port" placeholder="SMTP服务器端口号 465或587" />
          </t-form-item>

          <t-form-item label="用户名">
            <t-input v-model="emailData.username" placeholder="SMTP服务器用户名 xxx@qq.com" />
          </t-form-item>

          <t-form-item label="密码">
            <t-input v-model="emailData.password" placeholder="SMTP服务器密码" type="password" />
          </t-form-item>
        </t-form>
      </t-space>
    </t-col>
    <t-col :lg="7" :md="6" :sm="12" :xl="7" :xs="12" class="right">
      <img alt="" class="img" src="@/assets/images/author/pay-bg.png" />
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
.left_space {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 40%;
  }
}
</style>
